<!-- 底部工具栏 -->
<template>
  <div class="todo-tool">
    <span class="todo-count">
      <strong>{{ remaining }}</strong> item left
    </span>
    <ul class="filters">
      <li>
        <a
          href="###"
          @click="handleItemClick('all')" :class="[{ selected: activeTab === 'all' }]"
          >All</a
        >
      </li>
      <li>
        <a
          href="###"
          @click="handleItemClick('active')" :class="[{ selected: activeTab === 'active' }]"
          >Active</a
        >
      </li>
      <li>
        <a
          href="###"
          @click="handleItemClick('complete')" :class="[{ selected: activeTab === 'complete' }]"
          >Completed</a
        >
      </li>
    </ul>
    <button class="clear-completed"  @click="handleDelComplete">Clear completed</button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    remaining: {
      type: Number,
      default: 1,
    },
    activeTab: {
      type: String,
      default: 'all',
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleItemClick:function(activeTab){
      this.$emit('changeTab',activeTab);
    },
    // 删除已完成的todos
    handleDelComplete:function(){
      this.$emit('delcomplete')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.todo-tool {
  background: #fff;
  width: 610px;
  margin: 0 auto;
  position: relative;
  color: #777;
  padding: 10px 20px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.todo-tool::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
  font-size: 12px;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  font-size: 12px;
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
}
.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  color: #777;
  background: none;
}
.selected {
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>